<template>
  <div id="equipShop">
    <div class="work-shop" ref="workShop">
      <!--  头部区域  -->
      <WorkHeader />
      <!--  内容区域  -->
      <div class="content" :style="{ height: contentHeight }">
        <a-row :gutter="24">
          <a-col :span="6"><EquipmentList></EquipmentList> </a-col>
          <a-col :span="12"><EquipmentNumber></EquipmentNumber></a-col>
          <a-col :span="6"><Equipmentstats></Equipmentstats></a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
import WorkHeader from "./components/workHeader";
import EquipmentList from "./components/EquipmentList";
import EquipmentNumber from "./components/EquipmentNumber";
import Equipmentstats from "./components/Equipmentstats";
export default {
  name: "index",
  components: {
    WorkHeader,
    EquipmentList,
    EquipmentNumber,
    Equipmentstats,
  },
  data() {
    return {
      contentHeight: "",
      isFullFlag: false,
    };
  },
  created() {
    this.toggleFullScreen();
  },
  methods: {
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.request(this.$refs.workShop);
      }
    },
  },
};
</script>

<style scoped lang="less">
.work-shop {
  // background: #000f24;
  height: 1080px;
  overflow: hidden;
  background-image: url(../../images/workShow/bd.png);
  background-size:100% 100%;
}
</style>
                                                         